<template>
  <div class="FooterMsuic">
    <div class="footerLeft" @click="alterMusiclDetail">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div class="worksMessage">
        <p>{{ playList[playListIndex].name }}</p>
        <span>横滑切换上下首哦</span>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" v-if="isdisplay" @click="play">
        <use xlink:href="#icon-24gl-playCircle"></use>
      </svg>
      <svg class="icon" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-gl-pauseCircle-copy"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zu"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>

    <!-- 详情页的组件 -->
    <!-- 由于这个footer是全局组件所以需要将这个展示的控制条件放到vuex中 -->
    <van-popup
      v-model:show="MusicDetail"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <music-detail
        :musicList="playList[playListIndex]"
        :isdisplay="isdisplay"
        :play="play"
        :addDuration="addDuration"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import MusicDetail from "./MusicDetail.vue";
export default {
  data() {
    return {
      Timeinterval: 0,
    };
  },
  components: { MusicDetail },
  computed: {
    ...mapState(["playList", "playListIndex", "isdisplay", "MusicDetail"]),
  },
  mounted() {
    // console.log(this.$refs);

    this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
    // 页面刚刚一渲染的时候就要获取到当前的歌曲的duration
    this.addDuration()
  },
  updated() {
    this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
  },
  methods: {
    // 让音乐播放的处理函数
    play() {
      // 使他播放
      if (this.$refs.audio.paused) {
        //audio的中的属性
        this.$refs.audio.play();
        this.$store.commit("updateBtn", false);
        this.updateTime(); //播放就调用函数进行传值
      } else {
        // 使他关闭
        this.$refs.audio.pause();
        this.$store.commit("updateBtn", true);
        clearInterval(this.Timeinterval); //暂停就停止传值
      }
    },
    // 添加歌曲的总时长
    addDuration() {
      this.updateDuration(this.$refs.audio.duration);
    },
    // 时间间隔器，隔段时间获取当前的时间，并改变vuex中的值
    updateTime() {
      this.Timeinterval = setInterval(() => {
        this.updatecurrentTime(this.$refs.audio.currentTime);
      }, 1000);
    },
    ...mapMutations([
      "alterMusiclDetail",
      "updatecurrentTime",
      "updateDuration",
    ]),
  },
  watch: {
    playListIndex() {
      this.$refs.audio.autoplay = true;
      this.$store.commit("updateBtn", false);
    },
    playList() {
      if (this.isdisplay) {
        this.$refs.audio.autoplay = true;
        this.$store.commit("updateBtn", false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.FooterMsuic {
  height: 1.2rem;
  width: 100%;
  border-top: 0.02rem solid #999;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  .footerLeft {
    width: 80%;
    display: flex;
    img {
      height: 90%;
      width: 0.9rem;
      border-radius: 100%;
    }
    .worksMessage {
      padding-left: 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        font-size: 0.32rem;
        // height: 50%;
        width: 4rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        // height: 50%;
        font-size: 0.24rem;
        color: gray;
        margin-top: 0.04rem;
      }
    }
  }
  .footerRight {
    width: 20%;
    display: flex;
    justify-content: space-between;
    padding-left: 0.1rem;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
</style>